/* 手机验证码登录页面特有样式 */
.page-title {
    margin-top: 24rpx;
    font-size: 32rpx;
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    letter-spacing: 2rpx;
}

/* 验证码输入框特殊样式 */
.verify-code-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 48rpx;
}

.verify-code-wrapper .verify-code-input {
    flex: 1;
    margin-right: 20rpx;
}

/* 微信小程序验证码按钮兼容性样式 */
.verify-code-wrapper .send-code-btn {
    width: 200rpx;
    height: 88rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 44rpx;
    color: white;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

    &:active {
        transform: scale(0.98);
        opacity: 0.8;
    }

    &.disabled {
        background: rgba(0, 0, 0, 0.1);
        color: rgba(0, 0, 0, 0.3);
        cursor: not-allowed;

        &:active {
            transform: none;
            opacity: 1;
        }
    }
}

/* 微信小程序button伪元素重置 */
.verify-code-wrapper .send-code-btn::after {
    border: none;
    background: none;
    content: none;
}

.verify-code-wrapper .send-code-btn.disabled {
    background: var(--border-color, #e8eaed);
    color: var(--text-tertiary, #999999);
    cursor: not-allowed;
}

.verify-code-wrapper .send-code-btn:not(.disabled):hover {
    background: var(--accent-color, #1a1a1a);
    transform: translateY(-50%) scale(1.05);
}

.verify-code-wrapper .send-code-btn:not(.disabled):active {
    transform: translateY(-50%) scale(0.95);
}

/* 微信小程序专用样式 */
/* #ifdef MP-WEIXIN */
.verify-code-wrapper .send-code-btn {
    background: #2c2c2c !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 24rpx !important;
    line-height: 1 !important;
    text-align: center !important;
}

.verify-code-wrapper .send-code-btn.disabled {
    background: #e8eaed !important;
    color: #999999 !important;
}

.verify-code-wrapper .send-code-btn text {
    display: inline-block;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.verify-code-wrapper .send-code-btn .btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.verify-code-wrapper .send-code-btn .btn-content text {
    display: inline-block;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* #endif */

/* 切换登录方式 */
.switch-login {
    display: flex;
    justify-content: center;
    margin-top: 24rpx;
}

.switch-link {
    padding: 16rpx 32rpx;
    border: 2rpx solid var(--border-color);
    border-radius: 50rpx;
    background: var(--surface-color);
    cursor: pointer;
    transition: all var(--transition-smooth);
}

.switch-link:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.switch-link:hover .switch-text {
    color: #ffffff;
}

.switch-text {
    font-size: 28rpx;
    color: var(--text-secondary);
    transition: color var(--transition-smooth);
}

/* 响应式设计 */
@media (max-width: 750rpx) {
    .page-title {
        font-size: 30rpx;
        margin-top: 20rpx;
    }

    .verify-code-wrapper .verify-code-input {
        padding-right: 180rpx;
    }

    .verify-code-wrapper .send-code-btn {
        width: 160rpx;
        height: 56rpx;
        font-size: 22rpx;
    }
}

@media (max-width: 640rpx) {
    .page-title {
        font-size: 28rpx;
        margin-top: 16rpx;
    }

    .verify-code-wrapper .verify-code-input {
        padding-right: 160rpx;
    }

    .verify-code-wrapper .send-code-btn {
        width: 140rpx;
        height: 52rpx;
        font-size: 20rpx;
    }

    .switch-text {
        font-size: 26rpx;
    }
}

page {
    box-sizing: border-box;
    height: 100%;
}

.login {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
    position: relative;
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
    padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
    /* 兼容iOS < 11.2 */
}

/* 头部 logo */
.header {
    width: 260rpx;
    height: 260rpx;
    box-shadow: 0rpx 0rpx 60rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    margin-top: 128rpx;
    margin-bottom: 72rpx;
    margin-left: auto;
    margin-right: auto;

    image {
        width: 260rpx;
        height: 260rpx;
        border-radius: 50%;
    }
}

/* 主体 */
.main {
    display: flex;
    flex-direction: column;
    padding-left: 70rpx;
    padding-right: 70rpx;
}

/* 登录按钮 */
.my-button {
    margin-top: 96rpx;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* 微信小程序特殊处理 */
/* #ifdef MP-WEIXIN */
.my-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* #endif */

/* 其他登录方式 */
.other_login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 30rpx;
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    /* 兼容iOS < 11.2 */
    backdrop-filter: blur(10px);

    .other_login_text {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.5);
        margin-bottom: 20rpx;
    }

    .login_icons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .login_icon {
        border: none;
        margin: 0 48rpx;
        width: 64rpx;
        height: 64rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        &:active {
            transform: scale(0.95);
            opacity: 0.7;
        }

        .login_icon_image {
            width: 64rpx;
            height: 64rpx;
            filter: opacity(0.75) brightness(0.6);
            transition: all 0.3s ease;
        }

        &:active .login_icon_image {
            filter: opacity(0.9) brightness(0.8);
        }
    }
}